<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<script>
	  var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
	    CSS.supports('top: constant(a)'))
	  document.write(
	    '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
	    (coverSupport ? ', viewport-fit=cover' : '') + '" />')
	</script>
    <title>模块化自动战斗游戏</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div id="app"><!--app-html--></div>
    <div id="game-container">
        <h1>层级自动战斗放置游戏</h1>
        
        <div class="status-bar">
            <div>
                <h3>玩家</h3>
                <div class="progress-bar">
                    <div class="progress" id="playerHealth"></div>
                </div>
                <p>攻击力: <span id="playerAttack">10</span></p>
                <p>金币: <span id="gold">0</span></p>
            </div>
            
            <div>
                <h3>敌人 (Lv.<span id="enemyLevel">1</span>)</h3>
                <div class="progress-bar">
                    <div class="progress" id="enemyHealth"></div>
                </div>
                <p>剩余敌人: <span id="enemiesRemaining">10</span></p>
            </div>
        </div>

        <div class="combat-log" id="combatLog"></div>

        <div class="shop">
            <div class="upgrade">
                <h4>攻击升级 (Lv.<span id="attackLevel">1</span>)</h4>
                <p>+5 攻击力</p>
                <button onclick="Shop.upgradeAttack()" id="attackBtn">
                    升级 (<span id="attackCost">50</span>金币)
                </button>
            </div>
            
            <div class="upgrade">
                <h4>生命恢复 (Lv.<span id="healLevel">1</span>)</h4>
                <p>+2 生命/秒</p>
                <button onclick="Shop.upgradeHealing()" id="healBtn">
                    升级 (<span id="healCost">30</span>金币)
                </button>
            </div>
        </div>
    </div>
	<script type="module" src="js/game.js"></script>
    <script type="module" src="js/shop.js"></script>
</body>
</html>